<!DOCTYPE html>
<html>
    <head>
        <title>clip-path</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
            <!-- <style>
                    .polygon{
                      width: 600px;
                      height: 300px;
                      background-color: black;
                      clip-path: polygon(20% 30%, 0 70%, 40% 70%);
                      animation: move 1s infinite alternate;
                    }
                    @keyframes move {
                      to {
                        background-color: grey;
                        clip-path: polygon(80% 70%, 100% 30%, 60% 30%);
                      }
                    }
                  </style> -->

        <!-- <div class="polygon"></div> -->


        <div class="content"></div>

        <div class="shape-container">
            <!-- <div class="shape1"></div> -->
            <!-- <div class="shape2"></div> -->
            <!-- <div class="shape3"></div> -->
            <!-- <div class="shape4"></div> -->
            <!-- <div class="shape5"></div> -->
            <!-- <div class="shape6"></div> -->
            <!-- <div class="shape7"></div> -->
            <!-- <div class="shape8"></div> -->
            <!-- <div class="shape9"></div> -->
            <!-- <div class="shape10"></div> -->
            <!-- <div class="shape11"></div> -->
            <!-- <div class="shape12"></div> -->
            <!-- <div class="shape13"></div> -->
            <!-- <div class="shape14"></div> -->
            <!-- <div class="shape15"></div> -->
            <!-- <div class="shape16"></div> -->
            <!-- <div class="shape17"></div> -->
            <!-- <div class="shape18"></div> -->
            <!-- <div class="shape20"></div> -->
            <!-- <div class="shape21"></div> -->
            <!-- <div class="shape22"></div> -->
            <!-- <div class="shape23"></div> -->
            <!-- <div class="shape24"></div> -->
            <!-- <div class="shape25"></div> -->
            <!-- <div class="shape26"></div> -->
            <!-- <div class="shape27"></div> -->
            <!-- <div class="shape28"></div> -->

            <div class="s1"></div>
            <div class="s2"></div>
            <div class="s3"></div>
            <div class="s4"></div>
            <div class="s5"></div>
            <div class="s6"></div>
            <div class="s7"></div>
            <div class="s8"></div>
            <div class="s9"></div>
            <div class="s10"></div>
            <div class="s11"></div>
            <div class="s12"></div>
            <div class="s13"></div>
        </div>


        
      
    

    </body>
</html>